<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="icon-tab-0" data-bs-toggle="tab" aria-current="page"
      href="#icon-tabpanel-0">ВЫРАЖЕНИЯ ОТПРАВЛЕННЫЕ НА СЕРВЕР</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="icon-tab-1" data-bs-toggle="tab" href="#icon-tabpanel-1">ПОСЧИТАННЫЕ ВЫРАЖЕНИЯ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="icon-tab-2" data-bs-toggle="tab" href="#icon-tabpanel-2" tabindex="-1"
      aria-disabled="true">НЕ ВАЛИДНЫЕ ВЫРАЖЕНИЯ</a>
  </li>
</ul>
<div class="tab-content pt-5" id="tab-content">
  <div class="tab-pane active" id="icon-tabpanel-0" role="tabpanel" aria-labelledby="icon-tab-0">
    <form id="formExpression" name="FormExpression">
      <div class="mb-3">
        <label for="inputExpression" class="form-label">Arithmetic expression</label>
        <input type="text" name="expression" class="form-control" id="input-expression"
          placeholder="enter an arithmetic expression">
      </div>
      <button id="btn-send" type="submit" class="btn btn-primary" data-bs-toggle="tooltip">Send</button>
    </form>
    <ul class="list-group mt-3">
    </ul>
  </div>
  <div class="tab-pane" id="icon-tabpanel-1" role="tabpanel" aria-labelledby="icon-tab-1">
    <ul class="list-group mt-3" id="ul-tabpanel-1">
      {{ if .Expressions}}
      {{ range .Expressions }}
      {{ if .Result }}
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">{{ .Expression }} = {{ .Result }}</div>
          {{.Message}}
        </div>
        <span class="badge bg-primary rounded-pill">{{ .State }}</span>
      </li>
      {{ end }}
      {{ end }}
      {{ else }}
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Нет посчитанных выражений</div>
        </div>
      </li>
      {{ end }}
    </ul>
  </div>
  <div class="tab-pane" id="icon-tabpanel-2" role="tabpanel" aria-labelledby="icon-tab-2">
    <ul class="list-group mt-3" id="ul-tabpanel-2">
      {{if .Expressions}}
      {{ range .Expressions }}
      {{ if eq .State "error" }}
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">{{ .Expression }}</div>
          {{.Message}}
        </div>
        <span class="badge bg-primary rounded-pill">{{ .State }}</span>
      </li>
      {{end}}
      {{end}}
      {{else}}
      <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
          <div class="fw-bold">Выражений нет</div>
        </div>
      </li>
      {{end}}
    </ul>
  </div>
</div>

<script src="/js/home.js"></script>